{% stylesheet %}
    #header_box .top_bar{
        display: block;
        text-align: center;
        text-align: center;
        line-height: 20px;
        padding: 10px 0;
    }
    #header_box .header_content{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 70px;
    }
    #header_box .logo a{
        font-size: var(--title_font_size);
        color: var(--title_color);
        font-family: var(--title_font_family);
        font-style: var(--title_font_style);
        font-weight: var(--title_font_weigth);
        letter-spacing: var(--title_letter_spacing);
        display: flex;
        align-items: center;
    }
    #header_box .logo img{
        max-height: 70px;
        max-width: 200px;
    }
    #header_box .header_icon{
        display: flex;
        display: -webkit-flex;
        justify-content: flex-end;
        align-items: center;
    }
    #header_box .header_search{
        position: relative;
        height: 40px;
        width: 40px;
    }
    #header_box .saerch_icon{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
    }
    #header_box .pop_search{
        position: absolute;
        right: 0;
        top: 0;
        width: 240px;
        height: 40px;
        border-bottom: 1px solid #000;
        display: none;
    }
    #header_box .pop_search form{
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
    }
    #header_box .pop_search .search_txt{
        width: calc(100% - 40px);
        height: 40px;
    }
    #header_box .pop_search .search_btn{
        background: none;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 0;
        cursor: pointer;
    }
    #header_box .cart_icon,
    #header_box .account_icon{
        margin-left: 30px;
    }
    #header_box .header_icon a.cart_icon{
        position: relative;
    }
    #header_box .header_icon a.cart_icon span {
        min-width: 20px;
        height: 20px;
        background: #F00B0B;
        display: none;
        color: #fff;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        position: absolute;
        top: 50%;
        right: -10px;
        margin-top: -25px;
    }
    #header_box .currency_box{
        position:relative;
        z-index:1000;
        margin-left: 30px;
    }
    #header_box .currency_txt{
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--menu-color);
        letter-spacing: var(--nav_letter_spacing);
        height:30px;
        line-height:30px;
        cursor:pointer;
    }
    #header_box .drop_currency a {
        color: var(--menu-color);
        letter-spacing: var(--nav_letter_spacing);
        font-size: 14px;

      }
    #header_box .currency_txt svg{
        width: 14px;
        fill: #333;
        margin-left: 5px;
    }

    #header_box .drop_currency{
        position:absolute;
        top:30px;
        right:0;
        padding:10px;
        width:120px;
        box-sizing:border-box;
        background:#fff;
        border:1px solid #e8e8e8;
        -webkit-transition: transform .2s ease-in-out;
        -moz-transition: transform .2s ease-in-out;
        transition: transform .2s ease-in-out;
        -webkit-transform: scale3d(1,0,1);
        transform: scale3d(1,0,1);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    #header_box .drop_currency_on .drop_currency{
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
    }
    #header_box .currency_txt svg{
        -webkit-transition: transform .2s ease-in-out;
        -moz-transition: transform .2s ease-in-out;
        transition: transform .2s ease-in-out;
    }
    #header_box .drop_currency_on .currency_txt svg{
        transform:rotate(-180deg);
    }
    #header_box .drop_currency li{
        list-style-type: none;
    }
    #header_box .drop_currency a{
        display: flex;
        justify-content: space-between;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        /* color: #333; */
        margin: 0;
    }
    #header_box .drop_currency a:hover{
        background:#000;
        color:#fff;
    }
    #header_box .nav_box{
        position: relative;
        z-index: 999;
    }
    #header_box .nav_box .container_wrapper{
        display: flex;
        justify-content: center;
    }
    #header_box .nav_box ul{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    #header_box .nav_box ul > li{
        padding: 5px 20px 15px;
        list-style-type: none;
        position: relative;
    }
    #header_box .nav_box li > a{
        position: relative;
        display: block;
        line-height: 1.5;
    }
    #header_box .nav_box li > a:after {
        content: '';
        position: absolute;
        width: 0;
        height: 1px;
        left: 0;
        bottom: -1px;
        z-index: 1;
        background-color: var(--color-main);
        transition: width .25s .2s;
    }
    #header_box .nav_box li:hover > a:after{
        width: 100%;
    }


    #header_box .nav_box li .nav-child{
        position: absolute;
        left: 0;
        top: 40px;
        min-width: 200px;
        background: #fff;
        box-shadow: 0 2px 2px #ddd;
        padding: 20px;
        box-sizing: border-box;
        opacity: 0;
        visibility: hidden;
        font-size: 14px;
        transition: all 0.1s;
    }
    #header_box .nav_box li .nav-child > a{
        display: block;
        line-height: 2;
        transition: all 0.3s;
        white-space: nowrap;
        color: #666;
    }
    #header_box .nav_box li .nav-child > a:hover{
        text-decoration: underline;
        color: var(--color-main);
    }


    #header_box .nav_box li.nav-child-three{
        position: static;
    }
    #header_box .nav_box li.nav-child-three .nav-child{
        width: 100%;
        box-shadow: none;
        background: #fff;
        padding: 0;
        box-shadow: 0 2px 2px #ddd;
    }
    #header_box .nav_box li.nav-child-three .container_wrapper{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 20px 30px;
        background: #fff;
        box-sizing: border-box;
    }
    #header_box .nav_box li.nav-child-three > .nav-child > .container_wrapper > a,
    #header_box .nav_box li.nav-child-three .nav-child dl{
        width: 25%;
        margin-bottom: 30px;
    }
    #header_box .nav_box li.nav-child-three > .nav-child > .container_wrapper > a{
        font-weight: bold;
    }
    #header_box .nav_box li.nav-child-three .nav-child dl a{
        display: block;
        line-height: 2;
        transition: all 0.3s;
    }
    #header_box .nav_box li.nav-child-three .nav-child dl a:hover{
        text-decoration: underline;
        color: #333;
    }
    #header_box .nav_box li.nav-child-three .nav-child dl dd a{
        font-size: 14px;
        color: #666;
    }
    #header_box .nav_box li.nav-child-three .nav-child dl dt{
        margin-bottom: 5px;
    }
    #header_box .nav_box li.nav-child-three .nav-child dl dt a{
        font-weight: bold;
    }
    #header_box .nav_box li.nav-child-three .nav-child dl dd a{
        font-size: 14px;
        color: #666;
    }
    #header_box .nav_box li.nav-child-three .nav-child dl dd a:hover{
        color: var(--color-main);
    }
    #header_box .nav_box li:hover .nav-child{
        opacity: 1;
        visibility: visible;
    }

    #header_box .mobile_left,
    .mobile_menu{
        display: none;
    }
    @media (max-width: 1200px){
        #header_box .nav li.nav-child-three .nav-child{
            left:0;
            margin:0;
        }
        #header_box .top_bar{
            padding-left: 50px;
            padding-right: 50px;
        }
    }
    @media (max-width: 768px){
        #header_box .top_bar{
            padding-left: 30px;
            padding-right: 30px;
        }
        #header_box .mobile_left,
        .mobile_menu{
            display: block;
        }
        #header_box .mobile_left{
            width: 85px;
            display: flex;
            align-items: center;
        }

        #header_box .mobile_menu_icon{
            display: block;
        }
        #header_box .mobile_menu_icon .mobile_menu_line{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            width: 40px;
            height: 40px;
        }
        #header_box .mobile_menu_icon .mobile_menu_line span{
            width: 22px;
            height: 1px;
            background: #000;
            margin: 8px 0;
        }
        #header_box .mobile_menu_icon .mobile_menu_line:before{
            content: '';
            width: 22px;
            height: 1px;
            background: #000;
            transition: all 0.3s;
        }
        #header_box .mobile_menu_icon .mobile_menu_line:after{
            content: '';
            width: 22px;
            height: 1px;
            background: #000;
            transition: all 0.3s;
        }
        #header_box .mobile_menu_icon.on .mobile_menu_line:before{
            position: absolute;
            left: 7px;
            top: 50%;
            transform: rotate(45deg);
        }
        #header_box .mobile_menu_icon.on .mobile_menu_line:after{
            position: absolute;
            left: 7px;
            top: 50%;
            transform: rotate(135deg);
        }
        #header_box .mobile_menu_icon.on .mobile_menu_line span{
            display: none;
        }
        #header_box .mobile_search{
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 5px;
        }
        #header_box .header_icon{
            width: 80px;
        }
        #header_box .nav_box,
        #header_box .header_search,
        #header_box .currency_box, 
        #header_box .account_icon{
            display: none;
        }
       .mobile_menu{
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            z-index: 500100;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
            display: block;
            font-family: var(--general_font_family);
        }
        .mobile_menu .mobile_menu_wrapper{
            position: relative;
            height: 100vh;
            max-width: 300px;
            background: #fff;
            transform: translate(-300px,0);
            padding: 20px 0 60px;
            box-shadow: -9px 8px 16px 0 #5f5c5c;
            box-sizing: border-box;
            transition: all 0.3s;
        }
        .mobile_menu .mobile_menu_scroll{
            height: calc(100vh - 80px);
            overflow-y: auto;
            overflow-x: hidden;
            padding: 0 20px 50px;
            box-sizing: border-box;
        }
        .mobile_menu_on{
            opacity: 1;
            visibility: visible;
        }
        .main_container{
            transition: all 0.3s;
        }
        .main_on{
            transform: translate(300px,0);
            position: relative;
            z-index: 500100;
        }
        .mobile_menu .mobile_nav > ul > li{
            border-bottom: 1px solid #d4d4d4;
        }
        .mobile_menu .mobile_nav a{
            display: block;
            height: 50px;
            line-height: 50px;
            color: #000;
            font-size: 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .mobile_menu .mobile_nav a{
            letter-spacing: var(--nav_letter_spacing);
        }
        .mobile_menu .mobile_nav-item{
            position: relative;
            display: flex;
            align-items: center;
        }
        .mobile_menu .mobile_nav-item a{
            width: calc(100% - 50px);
        }
        .mobile_menu .mobile_nav_down{
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s;
        }
        .mobile_menu .mobile_nav_down .minus{
            display: none;
        }
        .mobile_menu li.on > .mobile_nav-item > .mobile_nav_down .plus{
            display: none;
        }
        .mobile_menu li.on > .mobile_nav-item > .mobile_nav_down .minus{
            display: block;
        }

        .mobile_menu .child_mobile_nav{
            opacity: 0;
            visibility: hidden;
            height: 0;
            padding: 0 0 0 15px;
            overflow: hidden;
        }
        .mobile_nav li.on > .child_mobile_nav{
            opacity: 1;
            visibility: visible;
            height: auto;
            padding: 0 0 15px 15px;
        }
        .mobile_menu .child_mobile_nav li a{
            width: calc(100% - 50px);
            padding: 0 ;
            box-sizing: border-box;
        }
        .mobile_menu .mobile_links{
            line-height: 2.5;
            margin-top: 20px;
        }
        .mobile_menu .mobile_links a{
            display: block;
            color: #000;
            font-size: 16px;
        }
        .mobile_currency{
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: absolute;
            left: 20px;
            bottom: 20px;
            width: calc(100% - 40px);
            height: 40px;
            border: 1px solid #d4d4d4;
            box-sizing: border-box;
        }
        .mobile_currency-select{
            width: 100%;
            height: 40px;
            padding: 0 10px;
            background: none;
            font-family: var(--general_font_family);
            appearance: none;
            border: 0;
            color: #000;
        }
        .mobile_currency svg{
            fill: #000;
            position: absolute;
            right: 10px;
            top: 11px;
        }
        .header_icon > a.cart_icon span{
            right: -3px;
        }

    }
    @media (max-width: 767px){
        .mobile_search{
            margin-left: 0;
        }
        .header_icon a.cart_icon{
            padding: 0 7px 0 0;
        }
    }
{% endstylesheet %}
{% if section and section.type == "header" %}
{% assign section = section %}
{% assign router = section.router %}
{% else %}
{% assign section = global.sections.header %}
{% assign router = routes.current_route %}
{% endif %}


{% if section.settings.is_index_board and router == "index/index" and section.settings.is_board %}
{% assign showBoard = true %}
{% elsif section.settings.is_index_board == false and section.settings.is_board %}
{% assign showBoard = true %}
{% else %}
{% assign showBoard = false %}
{% endif %}


{% get_nav nav_id={section.settings.nav.id} %}
{% assign header_nav = nav %}


    <div id="header_box">
        {% if showBoard %}
        <a class="top_bar" {% if section.settings.board_link.url != "" %}href="{{ section.settings.board_link.url }}"{% endif %} style="background-color:{{ section.settings.board_bg }};color: {{ section.settings.board_font }};">{{ section.settings.board_text }}</a>
        {% endif %}
     
        <div class="header_wrapper container_wrapper">
            <div class="header_content">
                <div class="mobile_left">
                    <a class="mobile_menu_icon" href="javascript:void(0);">
                        <div class="mobile_menu_line"><span></span></div>
                    </a>
                    {% if section.settings.is_search %}<a class="mobile_search" href="/search">{% include icon_header_search ,{width:'24',height:'24'} %}</a>{% endif %}
                </div>
                <div class="logo">
                    <a href="/">
                    {% if section.settings.logo_pic.src %}
                        <img src="{{ section.settings.logo_pic.src  | image_url:'600x600' }}" alt="{{ section.settings.logo_pic.alt}}">
                    {% else %} 
                    {{ storeConfig.name }}
                    {% endif %}
                    </a>
                </div>
                <div class="header_icon">
                    
                    {% if section.settings.is_search %}
                    <div class="header_search">
                        <a class="saerch_icon" href="javascript:void(0);">
                            {% include icon_header_search ,{width:'24',height:'24'} %}
                        </a>
                        <div class="pop_search">
                            <form class="control-all-search" action="/search" onsubmit="return oemsaasSearch('.search_txt')">
                                <input class="search_txt"  type="text" name="q" placeholder="{{ section.settings.search_placeholder }}">
                                <button class="search_btn" type="submit">{% include icon_header_search ,{width:'24',height:'24'} %}</button>
                            </form>
                        </div>
                    </div>
                    {% endif %}
      
                    {% if section.settings.is_member %}
                    <a class="account_icon" href="/account/login">
                        {% include icon_header_account ,{width:'24',height:'24'} %}
                    </a>
                    {% endif %}

                    <a class="cart_icon" {% if page_ca != 'cart_list' %} id="cart_icon" {% endif %} href="javascript:void(0);">
                        {% include icon_header_cart ,{width:'24',height:'24'} %}
                        <span id="cart_number"></span>
                    </a>

                    {% if section.settings.is_currency %}
                    <div class="currency_box" style="--menu-color:{{section.settings.menu_color}}">
                        <div class="currency_txt" id="currencyBox">{{ currency.standard_code }}
                            <svg t="1645079708741" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4270" width="10" height="10"><path d="M512 820.992L67.754667 376.661333 188.416 256 512 579.669333 835.754667 256l120.661333 120.661333z" fill="{{section.settings.menu_color}}" p-id="4271"></path></svg>
                        </div>
                        <div class="drop_currency" id="currencyCon">
                            <ul class="currency">
                                {% get_currencies limit=100 %}
                                {% for list in currencies %}
                                <li>
                                    <a href="javascript:void(0);" class="web-currency" data-type="{{ list.standard_code }}" rel="nofollow">
                                        <span>{{ list.standard_code }}</span><span>{{ list.symbol_left }}{{ list.symbol_right }}</span>
                                    </a>
                                </li>
                                {% endfor %}
      
                            </ul>
                        </div>
                        <script>
                            $("#currencyBox").click(function (e) {
                                e.stopPropagation();
                                if ($('.currency_box').hasClass('drop_currency_on')) {
                                    $('.currency_box').removeClass('drop_currency_on');  
                                } else {
                                    $('.pop_search').removeClass('pop_search_on');
                                    $('.currency_box').addClass('drop_currency_on');
                                }
                            });
                            $('.drop_currency').click(function (e) {
                                e.stopPropagation();
                            });
                            $(document).click(function () {
                                $('.currency_box').removeClass('drop_currency_on');
                            });
                        </script>
                    </div>
                    {% endif %}
                </div>
            </div> 
        </div>
        <div class="nav_box">
            <div class="container_wrapper">
                <ul>
                    {% if section.settings.nav.id %}
                    {% for item in header_nav.nav_item %}
                    
                    <li class="nav-li">
                        {% if item.children %}
                        {% include "nav_a",class:'nav-li-a' , nav : item %}
                        <div class="nav-child">
                            {% for el in item.children %}
                            {% if el.children %}
                            {% if forloop.first == true %}<div class="container_wrapper">{% endif %}
                            <dl>
                                <dt>
                                    {% include "nav_a", nav : el  %}
                                </dt>
                                {% for ddItem in el.children %}
                                <dd>
                                    {% include "nav_a", nav : ddItem  %}
                                </dd>
                                {% endfor %}
                            </dl>
                            {% if forloop.last == true %}</div>{% endif %}
                            {% else %}
                            {% include "nav_a", nav : el  %}
                            {% endif %}
                            {% endfor %}

                        </div>
                        {% else %}
                        {% include "nav_a",class:'nav-li-a' , nav : item  %}
                        {% endif %}
                    </li>
                    {% endfor %}

                    {% else %}
                    <li class="nav-li"><a class="nav-li-a" href="/" >Home</a></li>
                    <li class="nav-li"><a class="nav-li-a" href="/" >Shop</a></li>
                    <li class="nav-li"><a class="nav-li-a" href="/" >New Arrival</a></li>
                    <li class="nav-li"><a class="nav-li-a" href="/" >Faq</a></li>
                    <li class="nav-li"><a class="nav-li-a" href="/" >Blogs</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
        
        
    </div>
    <!-- 移动端菜单 -->
        <div class="mobile_menu">
            <div class="mobile_menu_wrapper">
                <div class="mobile_menu_scroll">
                    <div class="mobile_nav">
                        <ul>
                            {% if section.settings.nav.id %}
                            {% for item in header_nav.nav_item %}
                            <li>
                                {% if item.children %}
                                <div class="mobile_nav-item">
                                    {% include "nav_a", nav : item  %}
                                    <span class="mobile_nav_down">
                                        <svg t="1645086036028" class="plus" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4400" width="18" height="18"><path d="M64 512m32 0l896 0q32 0 32 32l0 0q0 32-32 32l-896 0q-32 0-32-32l0 0q0-32 32-32Z" p-id="4401"></path><path d="M576 64m0 32l0 896q0 32-32 32l0 0q-32 0-32-32l0-896q0-32 32-32l0 0q32 0 32 32Z"  p-id="4402"></path></svg>
                                        <svg t="1645086060199" class="minus" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4531" width="18" height="18"><path d="M64 512m32 0l896 0q32 0 32 32l0 0q0 32-32 32l-896 0q-32 0-32-32l0 0q0-32 32-32Z" p-id="4532"></path></svg>
                                    </span>
                                </div>
                                <ul class="child_mobile_nav">
                                    
                                    {% for el in item.children %}
                                    <li>
                                        {% if el.children %}
                                        <div class="mobile_nav-item">
                                            {% include "nav_a", nav : el  %}
                                            <span class="mobile_nav_down">
                                                <svg t="1645086036028" class="plus" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4400" width="18" height="18"><path d="M64 512m32 0l896 0q32 0 32 32l0 0q0 32-32 32l-896 0q-32 0-32-32l0 0q0-32 32-32Z" p-id="4401"></path><path d="M576 64m0 32l0 896q0 32-32 32l0 0q-32 0-32-32l0-896q0-32 32-32l0 0q32 0 32 32Z"  p-id="4402"></path></svg>
                                                <svg t="1645086060199" class="minus" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4531" width="18" height="18"><path d="M64 512m32 0l896 0q32 0 32 32l0 0q0 32-32 32l-896 0q-32 0-32-32l0 0q0-32 32-32Z" p-id="4532"></path></svg>
                                            </span>
                                        </div>
                                        <ul class="child_mobile_nav">
                                            {% for ddItem in el.children %}
                                            <li>
                                                {% include "nav_a", nav : ddItem  %}
                                            </li>
                                            {% endfor %}
                                        </ul>
                                        {% else %}
                                        {% include "nav_a", nav : el  %}
                                        {% endif %}
                                    </li>
                                    {% endfor %}
                                </ul>
                                {% else %}
                                {% include "nav_a", nav : item  %}
                                {% endif %}
                            </li>
                            {% endfor %}
                            {% else %}
                            <li><a href="/">Home</a></li>
                            {% endif %}
                            
                        </ul>
                    </div>
                    {% if section.settings.is_member %}
                    <div class="mobile_links">
                        {% if customerInfo and customerInfo.email %}
                        <a href="/account">{{ lang.layout.customer.account }}</a>
                        {% else %}
                        <a href="/account/login">{{ lang.layout.customer.login }}</a>
                        <a href="/account/register">{{ lang.layout.customer.create }}</a>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
                

                {% if section.settings.is_currency %}
                <div class="mobile_currency">
                    <select class="mobile_currency-select">
                        {% get_currencies limit=100 %}
                        {% for list in currencies %}
                        <option value="{{ list.standard_code }}">
                            {{ list.standard_code }} : {{ list.symbol_left }}{{ list.symbol_right }}
                        </option>
                        {% endfor %}
                    </select>
                    {% include icon_arrow_down ,{width:'14',height:'14'} %}
                </div>
                {% endif %}
            </div>
        </div>
  

<script type="text/javascript">
	$(function(){
        $('.nav-child').each(function(){
            if($(this).find('dl').length > 0){
                $(this).parents('li').addClass('nav-child-three');
            }
        })
        $('.mobile_nav_down').click(function(){
            if($(this).parent().parent().hasClass('on')){
                $(this).parent().parent().removeClass('on');
            }else{
                $(this).parent().parent().addClass('on');
            }
            
        })
        $('.mobile_currency-select').val("{{currency.standard_code}}")
        $('.mobile_nav-item svg').click(function(){
            $(this).parent().siblings(".child_mobile_nav").slideToggle()
		})
        $('.mobile_currency-select').change(function(params) {
            currencyPath($(this).val())
        })

        $(".web-currency").click(function(){
            currencyPath($(this).data("type"))
        })
        function currencyPath(val){
            const currency = moi.getUrlParam('currency');
            if(currency || location.href.indexOf('theme_id') > -1){
                location.href = moi.changeURLArg(location.href,"currency",val)
            }
            else{
                location.href = moi.addURLParam(location.href,"currency",val)
            }
        }
		$('.saerch_icon').click(function(e){
            e.stopPropagation();
            $('.pop_search').show();
		})
        $(document).click(function(){
            $('.pop_search').hide();
        })
        $('.pop_search').click(function(e){
            e.stopPropagation();
        })
		
		$('.mobile_menu_icon').click(function(){
            $('.mobile_menu').addClass('mobile_menu_on');
            $(this).addClass('on');
            $('.main_container').addClass('main_on');
            $('body').css({
                'width':'100%',
                'height':'100vh',
                'overflow':'hidden'
            })
		})
		$('.mobile_menu').click(function(){
			$('.mobile_menu').removeClass('mobile_menu_on');
            $('.mobile_menu_icon').removeClass('on');
            $('.main_container').removeClass('main_on');
            $('body').removeAttr('style');
		})
		$('.mobile_menu_wrapper').click(function(e){
			e.stopPropagation();
		})
        moi.addEvent("updateBlock",function(){
            $('.mobile_menu').removeClass('mobile_menu_on');
            $('.mobile_menu_icon').removeClass('on');
            $('.main_container').removeClass('main_on');
            $('body').removeAttr('style');
        },true);

		$('#cart_icon').click(function(){
			$('.minicart').addClass('minicart_on');
            const html = $('.minicart').find(".minicart_mid").html();
            if(!html){
                miniCart();
            }
		})
        $('.minicart .close_btn').click(function(){
			$('.minicart').removeClass('minicart_on');
		})
		$('.minicart').click(function(){
			$('.minicart').removeClass('minicart_on');
		})
		$('.minicart_wrapper').click(function(e){
			e.stopPropagation();
		})
		addCartNum();



	})
</script>

{% schema %}
{
    "tag": "",
    "class": "header",
    "is_global": true,
    "name": {
        "zh_CN": "头部"
    },
    "max_blocks": "0",
    "settings": [
    {
        "type": "card_header",
        "label": {
            "zh_CN": "菜单导航设置"
        }
    },
    {
        "type": "card_nav",
        "label": {
            "zh_CN": "选择菜单"
        },
        "id": "nav"
    },
    {
        "type": "card_header",
        "label": {
            "zh_CN": "公告栏"
        }
    },
    {
        "type": "card_switch",
        "label": {
            "zh_CN": "开启公告栏"
        },
        "id": "is_board"
    },
    {
        "type": "card_switch",
        "label": {
            "zh_CN": "仅首页显示公告栏"
        },
        "id": "is_index_board"
    },
    {
        "type": "card_input",
        "label": {
            "zh_CN": "公告栏文案"
        },
        "id": "board_text"
    },
    {
        "type": "card_page_link",
        "label": {
            "zh_CN": "公告栏链接"
        },
        "id": "board_link",
        "default": {
            "type": "",
            "title": "",
            "url": ""
        }
    },
    {
        "type": "card_color",
        "label": {
            "zh_CN": "公告栏字体"
        },
        "id": "board_font"
    },
    {
        "type": "card_color",
        "label": {
            "zh_CN": "公告栏背景"
        },
        "id": "board_bg"
    },
    {
        "type": "card_header",
        "label": {
            "zh_CN": "顶部LOGO与图片"
        }
    },
    {
        "type": "card_image",
        "label": {
            "zh_CN": "logo图片"
        },
        "id": "logo_pic"
    },
    {
        "type": "card_switch",
        "label": {
            "zh_CN": "个人中心"
        },
        "id": "is_member"
    },
    {
        "type": "card_switch",
        "label": {
            "zh_CN": "搜索"
        },
        "id": "is_search"
    },
    {
        "type": "card_switch",
        "label": {
            "zh_CN": "货币切换"
        },
        "id": "is_currency"
    },
    {
        "type": "card_input",
        "label": {
            "zh_CN": "搜索底纹"
        },
        "id": "search_placeholder"
    }
    ],
    "blocks": [],
    "default": {
        "settings": {
            "nav": {
                "id":"",
                "title":""
            },
            "is_board": true,
            "is_index_board": true, 
            "board_text":"We Free Shipping Worldwide.",
            "board_link": {
                "type": "",
                "title": "",
                "url": ""
            },
            "board_font":"#000000",
            "board_bg":"#E3E3E3",
            "logo_pic": {
                "src":"",
                "alt":""
            },
            "is_member": true,
            "is_search": true,
            "is_currency": true,
            "search_placeholder":"Search"
        },
        "blocks": []
    }
}
{% endschema %}